<template>
  <div class="container">
    <Echarts
      :data="OptionData3"
      style="width: 500px; height: 300px; margin-top: 30px"
    ></Echarts>
    <div class="gpu">
      <h2>GPU信息</h2>
      <h4>名称：{{ GPU[0].name }}</h4>
      <h4>总显存：{{ GPU[0].totalMem }}</h4>
      <h4>已用内存：{{ GPU[0].usedMem }}</h4>
    </div>
  </div>
</template>

<script>
import Echarts from "@/components/ECharts/ECharts.vue";
import { mapState } from "vuex";
export default {
  data() {
    return {
      OptionData3: {
        title: {
          text: "CPU信息",
        },
        series: [
          {
            type: "pie",
            top: 20,
            right: 50,
            data: [
              {
                name: "用户空间",
                value: "",
              },
              {
                name: "内核空间",
                value: "",
              },
              {
                name: "改变过优先级的进程",
                value: "",
              },
              {
                name: "空闲CPU",
                value: "",
              },
              {
                name: "IO等待",
                value: "",
              },
            ],
            label: {
              show: true,
              // position: "inside",
              // fontSize: 12,
              formatter: function(arg) {
                return arg.data.name + ":" + arg.data.value + "%";
              },
            },
            emphasis: {
              label: {
                show: true,
              },
              labelLine: {
                show: false,
              },
            },
          },
        ],
      },
    };
  },
  components: {
    Echarts,
  },
  computed: {
    ...mapState(["sessionId", "CPU", "GPU"]),
  },
  watch: {
    CPU: {
      handler(newValue, oldValue) {
        // this.drawLineGraph(this.id, newValue)
        this.getCPUData(newValue);
      },
      deep: true,
    },
  },
  methods: {
    getCPUData(redata) {
      this.OptionData3.series[0].data[0].value = redata.us;
      this.OptionData3.series[0].data[1].value = redata.sy;
      this.OptionData3.series[0].data[2].value = redata.ni;
      this.OptionData3.series[0].data[3].value = redata.id;
      this.OptionData3.series[0].data[4].value = redata.wa;
    },
  },
  created() {
    this.$http({
      method: "get",
      url: "/resource/cpu",
      params: {
        sessionId: this.sessionId,
      },
    });
    // this.$http({
    //   method: "get",
    //   url: "/resource/dataPackage",
    //   params: {
    //     sessionId: this.sessionId,
    //     port:8080
    //   },
    // });
    this.$http({
      method: "get",
      url: `/resource/gpu/${this.sessionId}`,
      // params: {
      //   sessionId: this.sessionId,
      // },
    });
  },
  mounted() {
    // console.log(this.CPU);
    this.getCPUData(this.CPU);
  },
  beforeDestroy() {
    this.$http({
      method: "delete",
      url: "/resource/cpu",
      params: {
        sessionId: this.sessionId,
      },
    }).then((res) => {
      console.log(res);
    });
    // this.$http({
    //   method: "delete",
    //   url: "/resource/dataPackage",
    //   params: {
    //     sessionId: this.sessionId,
    //   },
    // }).then((res) => {
    //   console.log(res);
    // });
    this.$http({
      method: "delete",
      url: `/resource/gpu/${this.sessionId}`,
      // params: {
      //   sessionId: this.sessionId,
      // },
    }).then((res) => {
      console.log(res);
    });
  },
};
</script>

<style scoped>
.container {
  display: flex;
}
.gpu {
  margin-top: 18px;
}
</style>
